import styled from 'styled-components'

export const AppModalContainer = styled.div.attrs(({ theme }) => {
	return theme
})`
	width: 100%;
	height: 100%;
	background-color: #00000073;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	.modal-wrapper {
		width: 620px;
		min-height: 366px;
		background: #fff;
		display: flex;
		flex-direction: column;
		position: relative;
		background-clip: padding-box;
		border-radius: 6px;
		box-shadow: 3px 3px 12px rgb(255 255 255 / 75%);
		pointer-events: auto;
		.close-icon {
			position: absolute;
			right: 15px;
			top: 20px;
			cursor: pointer;
		}
		.title,
		.footer {
			height: 35px;
			padding: 16px 24px;
			line-height: 35px;
		}
		.title {
			color: rgba(0, 0, 0, 0.65);
			border-bottom: 1px solid #e8e8e8;
		}
		.content {
			flex: 1;
			padding: 24px;
			line-height: 1.5;
			word-wrap: break-word;
		}
		.footer {
			text-align: right;
			background: transparent;
			border-top: 1px solid #e8e8e8;
		}
	}
`
